import React from 'react'
import config from '../api/http.js'
import axios from '../api/axios.js'
import Head from 'next/head'
import { Row,Col,Pagination } from 'antd'
import Header from '../components/Header'
import Sort from '../components/Sort'
// import Cart from '../components/Cart'
import Tag from '../components/Tag'
import ListData from '../components/ListData'
import Footer from '../components/Footer'
import '../style/css/compoments/common.css'
import '../style/css/pages/index.css'
// import axios from 'axios'
import { BackTop } from 'antd';
import dynamic from 'next/dynamic'
import ReactCanvasNest from 'react-canvas-nest'
const ReactLive2d = dynamic(import('react-live2d'), {
  ssr: false
})
class Home extends React.Component{
  componentDidMount(){
    this.getBlogData()
    this.getTypeData()
    this.getTagData()
  }
  constructor() {
    // es6继承必须用super调用父类的constructor
    super()
    this.state = {
      selectedStatus: 'tag',
      pageCurrent: 1,
      pageSize: 10,
      myList:[],
      myType:[],
      myTag:[]
    }
  }
 
  // 返回顶部
  goBack(){
    document.documentElement.scrollTop = 0
  }
  // 获取博客数据
  getBlogData = () => {
    config.post('blog/list',{
      pageSize: this.state.pageSize,
      pageCurrent: this.state.pageCurrent,
      title: '',
      type_id: '',
      user_id: '1',
      tag_ids: ''
    }).then(res=>{
      this.setState({
        myList: res.data.data
      })
    })
  }
  // 获取分类数据
  getTypeData = () =>{
    config.get('type/lists').then(res=>{
      this.setState({
        myType: res.data.data.records
      })
    })
  }
  // 获取标签数据
  getTagData = () =>{
    config.post('tag/lists',{
      pageSize:100,
      pageCurrent:1
    }).then(res=>{
      this.setState({
        myTag: res.data.data.records
      })
    })
  }
  render() {
    return (
      <div id="index">
      <Head>
        <title>Home</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header status={this.state.selectedStatus}/>
      <Row className="jade-index-main" type="flex" justify="center" >
        <Col className="jade-index-left" >
            <div className="jade-left-body"> 
            <div>
                <ListData mylist={this.state.myList} mytype={this.state.myType}/>
            </div>
            </div>
        </Col>
        {/* <Col className="index-right" xs={0} sm={0} md={7} lg={8} xl={6}>
            <div className="right-body">  
              <Sort mytype={this.state.myType}/>
              <Tag mytag={this.state.myTag}/>
            </div>
        </Col> */}
      </Row>
      <div className="pagination">
          <Pagination  current={this.state.pageCurrent} defaultPageSize={this.state.pageSize} total={this.state.myList.total} onChange={ (pageCurrent,pageSize) => 
            this.setState({
              pageCurrent : pageCurrent
            },()=>{
              this.goBack()
              this.getBlogData()
            }) 
          }/>
      </div>
      <Footer></Footer>
      <BackTop visibilityHeight={0} >
        <div className="backTop">
          <img className="backTop-img" src="/static/img/yao.jpg" />
        </div>
      </BackTop>
      <ReactCanvasNest  className = 'canvasNest'  mouseDist={5000} count={10000} config = {{ pointColor: ' 255, 255, 255 ' }} style = {{ zIndex: -998 ,width:'100%'}} />
      {/* <div className="reactLive2d-div">
        <ReactLive2d
          width = { 200}
          height = {300}
          bottom = { '-10px'}
          left = { '-20px'}
          color = {'#ef6767'}
          // ModelList = { ['Haru','Hiyori']}
          ModelList = { ['Hiyori']}
          TouchBody = { ['啊啊啊啊啊你要干嘛', '哼', '坏人','把你的手拿开']}
          PathFull='http://publicjs.supmiao.com/Resources/'
          menuList ={['Mtab']}
        />
      </div> */}
      </div>
    )
  }
}
export default Home
